<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {onMounted, reactive, ref, shallowReactive, shallowRef} from "vue";
import {GENDER_OPTIONS, PROVINCE_OPTIONS, RULE} from "../../../const/index.js";
import {listApi, updateApi} from "../../../api/axios.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import {getResponseData} from "../../../request/index.js";
import MyUpload from "../../../components/MyUpload.vue";
import {updatePasswordApi, UPLOAD_AVATAR_URL} from "../../../api/emp.js";

// 所属部门下拉菜单选项
let deptItems = ref([]);
// 获取当前登录的员工记录
let loginEmp = JSON.parse(sessionStorage.getItem('loginEmp'));
let deptOptions = deptItems.value;
// 导航栏
let navItems = [
  {icon: 'House', label: 'DashBoard', url: '/DashBoard/'},
  {icon: 'Edit', label: '修改个人信息'}
];

/* ================= 修改基本信息 ================= */
// 表单项 + 表单值 + 表单规则
let items = shallowRef([
  {label: '登录账号', prop: 'username', span: 12, disabled: true},
  {label: '真实姓名', prop: 'realname', span: 12},
  {label: '员工年龄', prop: 'age', span: 12, type: 'number'},
  {label: '手机号码', prop: 'phone', span: 12},
  {label: '身份证号', prop: 'idcard', span: 12},
  {label: '微信号码', prop: 'wechat', span: 12},
  {label: '电子邮箱', prop: 'email', span: 12},
  {label: '入职日期', prop: 'hiredate', span: 12, type: 'date'},
  {label: '所在省份', prop: 'province', span: 12, type: 'select', options: PROVINCE_OPTIONS},
  {label: '员工性别', prop: 'gender', span: 12, type: 'select', options: GENDER_OPTIONS},
  {label: '所属部门', prop: 'fkDeptId', span: 12, type: 'select', options: deptItems.value},
  {label: '详细地址', prop: 'address', type: 'textarea', rows: 2},
  {label: '员工描述', prop: 'info', type: 'textarea', rows: 9}
]);
let params = shallowReactive(loginEmp);
let rules = {
  realname: RULE.REALNAME,
  phone: RULE.PHONE,
  email: RULE.EMAIL,
  province: RULE.PROVINCE,
  address: RULE.ADDRESS,
  idcard: RULE.IDCARD,
  info: RULE.INFO,
};

/* ================= 修改后操作 ================= */

function updateSuccess() {
  ElMessage('修改个人信息后需要重新登录！')
  setTimeout(() => router.push('/'), 1000);
}

/* ================= 修改个人密码 ================= */

let updatePasswordItems = shallowRef([
  {label: '原密码', prop: 'oldPassword', type: 'password', required: true, placeholder: '请输入原密码'},
  {label: '新密码', prop: 'newPassword', type: 'password', required: true, placeholder: '请输入新密码'},
  {label: '确认密码', prop: 'confirmPassword', type: 'password', required: true, placeholder: '请确认新密码'},
]);
let updatePasswordParams = reactive({id: loginEmp['id']});
let updatePasswordRules = {
  oldPassword: RULE.PASSWORD,
  newPassword: [RULE.PASSWORD[0], {
    validator: (rule, value, callback) => {
      if (value === updatePasswordParams['oldPassword']) {
        callback('新旧密码不能相同');
      } else callback();
    },
    trigger: ['blur', 'change'],
  }],
  confirmPassword: [RULE.PASSWORD[0], {
    validator: (rule, value, callback) => {
      if (value !== updatePasswordParams['newPassword']) {
        callback('两次输入密码不一致');
      } else callback();
    },
    trigger: ['blur', 'change'],
  }],
};

/* ================= 加载函数 ================= */
onMounted(async () => {
  // 查询全部部门
  let depts = getResponseData(await listApi({module: 'dept'}));
  Object.values(depts).forEach(dept => {
    deptItems.value.push({label: dept['title'], value: dept['id']})
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-row :gutter="20" class="personal-update-body">
    <el-col :span="16">
      <el-card class="update-card" header="修改基本信息">
        <MyForm v-if="deptOptions.length>0" type="update"
                :items="items"
                :params="params"
                :rules="rules"
                :api="updateApi"
                :args="{'module': 'emp'}"
                :callback="updateSuccess"/>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="update-avatar-card" header="上传个人头像">
        <my-upload :url="UPLOAD_AVATAR_URL + '/' + loginEmp['id']" name="avatarFile" :callback="updateSuccess"
                   :autoUpload="true"
                   :show-file-list="false"/>
      </el-card>
      <el-card class="update-password-card" header="修改个人密码">
        <my-form type="update" :items="updatePasswordItems" :params="updatePasswordParams" :rules="updatePasswordRules"
                 :api="updatePasswordApi" :callback="updateSuccess"/>
      </el-card>
    </el-col>

  </el-row>
</template>

<style scoped lang="scss">
.personal-update-body {
  margin-top: 22px; // 上外边距
  height: 620px; // 高度
  overflow-y: scroll; // Y轴溢出滚动

  .update-password-card {
    margin-top: 23px; // 上外边距
  }
}
</style>